<template>
    <el-main>
      <el-form :inline="true" :model="user" class="demo-form-inline">
        <el-form-item label="账户：">
          <el-input v-model="user.username" placeholder="账户"></el-input>
        </el-form-item><br/>
        <el-form-item label="密码：">
          <el-input v-model="user.pwd" type="password" placeholder="密码"></el-input>
        </el-form-item><br/>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>
          <el-button type="primary" @click="add">注册</el-button>
        </el-form-item>
      </el-form>


      <el-dialog
        title="注册"
        :visible.sync="dialogVisible"
        width="66%"
        :before-close="handleClose">
        <el-form :inline="true" :model="saveForm" class="demo-form-inline">
          <el-form-item label="账户">
            <el-input v-model="saveForm.username" placeholder="账户"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="saveForm.pwd" placeholder="密码"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="saveForm.name" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="saveForm.sex" placeholder="性别"></el-input>
          </el-form-item>
          <el-form-item label="地区">
            <el-input v-model="saveForm.dq" placeholder="地区"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="saveForm.tel" placeholder="电话"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="saveForm.email" placeholder="邮箱"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>
      </el-dialog>

    </el-main>
</template>

<script>
  const axios=require("axios");
  const basepath="http://127.0.0.1:10086/api/zuul/";
    export default {
        name: "Login",
      data() {
        return {
          user:{},
          saveForm:{},
          dialogVisible:false,
        }
      },

      methods: {

        add(){
          this.dialogVisible=true;
          this.saveForm={};
        },
        save(){
          const self=this;
          this.dialogVisible=false;
          axios({
            url:basepath+"save",
            method: "post",
            data:this.saveForm
          }).then(res=>{
            self.$router.push("/");
          })
        },

        onSubmit(){
          const user =this.user;
          const self=this;
          axios({
            url:basepath+"login",
            method:"post",
            data:this.user
          }).then(res=>{
            if(res.data){
              self.$message("登录成功");
              self.$router.push("/user");
            }else {
              self.$message("密码或账户错误！！")
            }
          })
        },
        handleClose(done){
            this.$confirm('确认关闭？')
              .then(_ => {
                done();
              })
              .catch(_ => {});
        },
      }
    }
</script>

<style scoped>

</style>
